<template>
	<view class="cart-cantainer" v-if="cart.length !== 0">
		<!-- 收货地址组件 -->
		<!-- <my-address @address-change="getaddress"></my-address> -->
		<my-address></my-address>
		<!-- 商品列表的标题区域 -->
		<view class="cart-title">
			<!-- 左侧图标 -->
			<uni-icons type="shop-filled" size="30"></uni-icons>
			<!-- 右侧文本 -->
			<text class="cart-title-text">购物车</text>
		</view>
		<!-- 循环渲染购物车中的商品信息 -->
		<!-- uni-swipe-action 滑动操作组件-->
		<uni-swipe-action>
			<block v-for="(goods,i) in cart" :key="i">
				<uni-swipe-action-item :right-options="options" @click="swipeAction(goods)">
					<!-- 使用自定义的商品组件 -->
					<my-goods :item="goods" :showRadio="true" :showNum="true" @radio-change="radioChange"
						@num-change="numberChange"></my-goods>
				</uni-swipe-action-item>
			</block>
		</uni-swipe-action>
		<!-- 使用自定义的结算组件 -->
		<my-settle></my-settle>
		<!-- 创建一个微信二维码框，因为权限，所以uni.requestPayment无效，只能自己手动建 -->
		<view class="wx-box" v-if="wxzf">
			<view class="zf-box">
				<rich-text class="clock-box" @click="wxchange()">×</rich-text>
				<text class="wxzf">微信支付</text>
				<image src="/static/Screenshot_2022_0313_161209.png" class="erwei"></image>
				<text class="qt">请用开发者本人微信扫描以上二维码进行支付</text>
			</view>
		</view>
	</view>
	
	
	<!-- 当购物车的区域为空时 -->
	<view class="empty-cart" v-else>
		<image src="/static/aichegujiabeifen5.active.png" class="empty-img"></image>
		<text class="tip-text">空空如也</text>
	</view>
</template>

<script>
	//使TabBar页面的购物车也显示商品的数量 导入mixins的TabBar-badge文件
	import badgeMix from '@/mixins/tabbar-badge.js'
	//导入mapState辅助函数
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#c00000'
					}
				}]
			};
		},
		methods: {
			...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoods','updatewxzf']),
			radioChange(e) {
				// console.log(e)
				//使用通过mapMutations调用进来的updateGoodsState方法
				this.updateGoodsState(e)
			},
			numberChange(e) {
				this.updateGoodsCount(e)
			},
			//删除操作
			swipeAction(goods) {
				this.removeGoods(goods)
			},
			//关闭支付页面
			wxchange(){
				this.updatewxzf(false)
			}
			// getaddress(e){
			// 	uni.navigateTo({
			// 		url:'../../subpkg/address/address'
			// 	})
			// }

		},
		computed: {
			//通过计算属性获取到cart数据
			...mapState('m_cart', ['cart','wxzf'])
		}
	}
</script>

<style lang="scss">
	.cart-cantainer {
         margin-bottom: 50px;
		.cart-title {
			height: 40px;
			display: flex;
			align-items: center;
			padding: 0 5px;
			border-bottom: 1px solid #efefef;

			.cart-title-text {
				font-style: 14px;
			}
		}
	}
	.empty-cart{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 150px;
		background-color: #fff;
		height: 750rpx;
		.empty-img{
			width: 90px;
			height: 90px;
		}
		.tip-text{
			font-size: 14px;
			color: #00efef;
			margin-top: 15px;
		}
	}
	.wx-box{
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;
		height: 100%;
		width: 100%;
		background-color: rgba(10,10,10,0.7);
		.zf-box{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			position: relative;
			width: 80%;
			height: 300px;
			background-color: #fff;
			.clock-box{
				position: absolute;
				right: 0;
				top: 0;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				background-color: #fff;
				color: gray;
				border: 0;
				
			}
			.wxzf{
				font-size:18px;
				font-weight: bold;
				margin-top: 20px;
			}
			.erwei{
				width: 160px;
				height: 160px;
			}
			.qt{
				font-size: 14px;
				margin-bottom: 20px;
				padding: 0 40px;
				text-align: center;
			}
		}
	}
</style>
